<!-- 收藏列表 -->
<template>
	<view>
		<view class="item" v-for="(item2,index) in purchaseCommodityList" :key="index">
			<view class="item-title">
				<image :src="item2.productPicture" mode=""></image>
			</view>
			<view class="item-content">
				<view class="uv-icon" @click="Collect(item2)">
					<block v-if="item2.collect=='0'">
						<uv-icon name="star" size="24"></uv-icon>
					</block>
					<block v-if="item2.collect=='1'">
						<uv-icon name="star-fill" size="24" color="#4f76e4"></uv-icon>
					</block>
				</view>
				<view class="name">
					{{item2.commodityName}}/{{item2.unit}}
				</view>

				<!-- 自定义加减按钮 -->
				<view class="uv-number-box">
					<uv-number-box @change="ChangeNumber" :name="item2.commodityId" v-model="item2.number"
						:showMinus="item2.number == 0 ? false : true" :min="0">
						<template v-slot:minus>
							<view class="minus">
								<uv-icon name="minus" size="12">
								</uv-icon>
							</view>
						</template>
						<template v-slot:input>
						<!-- 	<text style="width: 50px;text-align: center;" class="input">
								{{item2.number}}
							</text> -->
							<input class="input" style="width: 50px;text-align: center;" type="number"
								v-model="item2.number" @blur="handleBlur(item2)" />
						</template>
						<template v-slot:plus>
							<view class="plus">
								<uv-icon name="plus" color="#FFFFFF" size="12">
								</uv-icon>
							</view>
						</template>
					</uv-number-box>
				</view>

			</view>
		</view>
		<uv-gap bg-color="#fff" height="200"></uv-gap>
		<view class="bottom">
			<image class="icon" src="@/static/cart.png" mode=""></image>
			<text>{{total}}件</text>
			<view class="button" @click="GoPurchaseInfo()">
				确认添加
			</view>
		</view>
	</view>
</template>

<script>
	import CollectAPI from '@/api/collect'
	export default {
		data() {
			return {
				purchaseCommodityList: [],
				chooseList: [],
				total: 0,
			};
		},
		onLoad() {
			this.collectList()
		},
		onReady() {
			uni.createSelectorQuery().select('.bottom').boundingClientRect(data => {
				this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(180) - data.height
			}).exec()
		},
		methods: {
			Collect() {
				console.info('暂不支持')
			},
			collectList() {
				// 收藏列表接口
				CollectAPI.collectList().then(res => {
					this.purchaseCommodityList = [...this.purchaseCommodityList, ...res.data]

					if (uni.getStorageSync('chooseList').length !== 0) {
						this.chooseList = uni.getStorageSync('chooseList')
						this.purchaseCommodityList = this.updatePurchaseCommodityList(this.purchaseCommodityList,
							this.chooseList)
						this.totalNum(this.chooseList)
					}
				})
			},
			updatePurchaseCommodityList(arrayA, arrayB) {
				let newArray = []
				arrayA.forEach(item => {
					let obj = {}
					arrayB.forEach(item2 => {
						if (item.commodityId === item2.commodityId) {
							obj = item2
						}
					})
					if (Object.keys(obj).length !== 0) {
						newArray.push(obj)
					} else {
						newArray.push(item)
					}
				})
				return newArray
			},

			handleBlur(item) {
				let commodityId = item.commodityId // 商品ID
				let val = item.number // 数量
				this.recalculate(commodityId, val)
			},
			// 更改数量
			ChangeNumber(e) {
				let commodityId = e.name // 商品ID
				let val = e.value // 数量
				this.recalculate(commodityId, val)
			},
			recalculate(commodityId, val) {
				let chooseList = this.chooseList
			
				// 查询并修改数量
				let obj = this.ChangeNumberList(commodityId)
				if (chooseList.length === 0) {
					obj.number = val
					chooseList.push(obj)
				}
				let index = chooseList.findIndex(item => item.commodityId === obj.commodityId);
				// 如果找到，则进行覆盖
				if (index !== -1) {
					chooseList[index] = obj;
					// 当数量减少为 0  时 移除改数组
					if (val === 0) {
						chooseList.splice(index, 1);
					}
				} else {
					if (val !== 0) {
						obj.number = val
						chooseList.push(obj)
					}
				}
			
				setTimeout(() => {
					this.totalNum(chooseList)
				}, 100);
			},
			// 修改数量
			totalNum(list) {
				this.total = list.reduce((acc, item) => acc + Number(item.number), 0);
			},

			ChangeNumberList(name) {
				let obj = {}
				this.purchaseCommodityList.forEach(list => {
					if (list.commodityId === name) {
						obj = list
					}
				})
				return obj
			},

			GoPurchaseInfo() {
				// 添加收藏 到购物车
				uni.setStorageSync('chooseList', this.chooseList)

				uni.navigateTo({
					url: '/subpackage/purchase/purchase'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		z-index: 999;

		.icon {
			margin: 0 20rpx 0 32rpx;
			width: 48rpx;
			height: 48rpx;
		}

		>text {
			font-weight: bold;
			font-size: 28rpx;
			color: #16141D;
			margin-right: 20rpx;

		}

		.button {
			margin-left: auto;
			margin-right: 20rpx;
			width: 431rpx;
			height: 92rpx;
      background: $custom-btn-color;
			box-shadow: 0rpx 5rpx 13rpx 1rpx rgba(67, 119, 236, 0.44);
			border-radius: 46rpx;
			line-height: 92rpx;
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.item {
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #E6E6E6;

		&-title {
			>image {
				width: 180rpx;
				height: 140rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1rpx solid #707070;
			}

			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}

		&-content {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			width: 500rpx;
			height: 120rpx;
			position: relative;

			.uv-icon {
				position: absolute;
				top: 0;
				right: 0;
			}

			.name {
				font-weight: 600;
				font-size: 28rpx;
				color: #16141D;
			}

			.uv-number-box {
				margin-top: auto;
				margin-left: auto;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #16141D;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>